<template>
  <div class="noData">
    <el-card shadow="never" class="header_box">
      <div class="header_img">
        <img class="custom_avator" src="@/assets/smartMarketing/drainage/luckyDraw/lucky_draw.png" alt="" />
      </div>
      <div class="header_text">
        <p class="title">抽奖引流</p>
        <p class="rules">创建抽奖活动，发送至客户邀请客户参与抽奖</p>
        <div class="docs">
          <p>1.设置奖品数量和获奖概率等任务限制，帮助企业有效提高社群活跃度和转化率 </p>
          <p>2.帮助企业获取流量，引流获客，提高企业获客率</p>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="content_box">
      <div class="content">
        <div>
          <img src="@/assets/noData.png" alt="" />
          <p class="hint">当前还没有活动哦~</p>
        </div>
        <el-button class="btn" size="small" @click="goUse" type="primary">去使用</el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
  import { defineEmits } from 'vue'
  import { useStore } from '@/store'
  const store = useStore()

  const emit = defineEmits(['submit'])
  const goUse = () => {
    // const { user:{currentCorp} } = JSON.parse(localStorage.getItem('zw-scrm-state'))
    const currentCorp = store.getters['user/getCurrentCorp']
    emit('submit', currentCorp)
  }
</script>

<style lang="scss" scoped>
  .noData {
    :deep(.el-card__body) {
      padding: 16px 20px;
      display: flex;
      align-items: center;
      .header_img {
        width: 100px;
        height: 100px;
        margin-right: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .header_text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-family: STHeitiSC-Medium-, STHeitiSC-Medium;
        color: #000000;
        font-weight: 400;
        .title {
          font-size: 20px;
          font-weight: normal;
        }
        .rules {
          font-size: 14px;
          margin: 6px 0 3px;
          line-height: 18px;
        }
        .docs {
          font-size: 14px;
          p {
            line-height: 18px;
          }
        }
      }
    }

    :deep(.content_box) {
      margin-top: 16px;
      height: calc(100vh - 305px);
      position: relative;
      .content {
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        img {
          width: 75px;
          height: 51px;
          margin-left: 32px;
        }
        .hint {
          font-size: 14px;
          font-weight: 400;
          color: #969696;
          line-height: 15px;
          margin-top: 11px;
        }
        .btn {
          width: 116px;
          height: 36px;
          margin-top: 16px;
        }
      }
    }
  }
</style>
